<template>
	<div class="booksgit">
		<div class="tablist">
			<!-- 出版社 -->
			<div class="swiper-container pressList" style="border-bottom: 1px dotted white;">
				<ul class="tab swiper-wrapper">
					<li class="swiper-slide" @click="find1(0)">全部</li>
					<li class="swiper-slide" v-for="(item,i) in makers " :key="i"  @click="find1(1,i)">{{item}}</li>
				</ul>
			</div>
			
			<!-- 出版时间 -->
			<div class="swiper-container pressList1" style="border-bottom: 1px dotted white;">
				<ul class="tab swiper-wrapper">
					<li class="swiper-slide" @click="find2(0)">全部</li>
					<li class="swiper-slide" v-for="(item,i) in publicationDate" :key="i" @click="find2(1,i)">{{item}}</li>
				</ul>
			</div>
		</div>
		<div class="box">
			<ul>
				<template v-for="(item,index) in arr">
					<li   :key="item.id">
						<router-link :to="`/mobile/bookDteail/${item.id}`">
							<img  :src="`http://127.0.0.1/api/public/showimg/${item.pic}`">
							<h3>{{item.name}}</h3>
							<span v-show="act == 0">{{item.maker}}</span>
							<span v-show="act == 1">{{item.tmake}}</span>
						</router-link>
					</li>
				</template>
			</ul>
		</div>
	</div>
</template>

<script>
	
	// 导入swiper组件内容【周期函数内，第一第二阶段，如果请求的数据进行轮播，建议在第三阶段执行】
	import Swiper from 'swiper';
	export default {
		name:'MobileBooksGit',
		components:{
			Swiper,
		},
		data(){
			return{
				act:0,
				arr:[],
				list:[],
				num:12,
				start:1,
				typeid:0,
				total:0,
				makers:[],
				publicationDate:[],
			}
		},
		methods:{
			find1(num,type){
				this.act = 0;
				this.arr = [];
				if(num == 0){
					this.arr = this.list;
				}else{
					this.list.forEach((item)=>{
					if(num == 0){
								this.arr.push(item)
					} else if(this.makers[type] == item.maker && num>0){
							 this.arr.push(item)
						}
						
					})
				}	
			},
			find2(num,type){
				this.act = 1;
				console.log(num),
				console.log(type);
				this.arr = [];
				if(num == 0){
					this.arr = this.list;
				}else{
					this.list.forEach((item)=>{
					if(num == 0){
								this.arr.push(item)
					} else if(this.publicationDate[type] == item.tmake && num>0){
							 this.arr.push(item)
						}
						
					})
				}	
			}
		},
		computed:{
		},
		created() {
			let maxYear = new Date().getFullYear();
			console.log(maxYear);
			for(let i=2010; i<maxYear; i++){
				this.publicationDate.push(i);
			}
		},
		mounted() {
			this.$get('/api/public/type/findAll2').then((resp)=>{
				console.log(resp.data);
			});
			this.$get(`/api/public/findPageBook/${this.start}/${this.num}/${this.typeid}`).then((resp)=>{
				console.log(resp.data.data)
				this.list = resp.data.data.books;
				this.total = resp.data.data.total;
				this.list .forEach((item)=>{
					let y = new Date(item.tmake).getFullYear();
					item.tmake = y;
				})
				this.list.forEach((item)=>{
					let n = this.makers.indexOf(item.maker);
					if(n == -1){
						this.makers.push(item.maker);
					}
			   })
			   console.log(this.list);
			   this.find1(0);
			})
			
			// 调用轮播对象
				setTimeout(()=>{
					new Swiper('.pressList,.pressList1',{
						  spaceBetween: 20,
						  slidesPerView :'auto',
						});
				},200)	
		},
	}
</script>

<style scoped>
	.booksgit{
		width: 100%;
		background-color: #f5d5a0;
		
	}
	.booksgit .tablist{
		width: 95%;
		margin: 0 auto 1rem;
		border-top: 1px dotted white;
	}
	.booksgit .tablist .tab{
		height: 2.5rem;
		line-height: 2.5rem;
	}
	.booksgit .tablist .tab li{
		color: #715e3e;
		font-size: 0.875rem;
		/* 不设置任何宽度，包括0 */
		width: unset;
	}
	.booksgit .box{
		margin-top: 3rem;
		position: relative;
		bottom: 2rem;
	}
	.booksgit .box ul{
		width: 96%;
		margin: 0 auto 1.5rem;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}
	.booksgit .box ul li{
		width: 46%;
		overflow: hidden;
		margin-left: 0.6rem;
		margin-bottom: 0.5rem;
		background-color: white;
		text-align: center;
		position: relative;
	}
	.booksgit .box ul li img{
		width: 80%;
		height: 10rem;
		margin-top: 1rem;
	}
	.booksgit .box ul li h3{
		width: 100%;
		height: 2.5rem;
		line-height: 2.5rem;
		font-size: 0.8rem;
	    background-color: rgba(245,213 ,160, 0.5);
		color: #a68b5b;
		text-align: center;
		font-weight: normal;
		white-space: nowrap;
		overflow:hidden;
		text-overflow: ellipsis;
		/*  */
		/* overflow: hidden; */
		/* text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2; */
	}
	.booksgit .box ul li span{
		font-size: 0.7rem;
		background-color: rgba(0,0,0,0.5);
		position: absolute;
		top:0;
		right: 0;
		color: gold;
		padding: 0.4rem 0.3rem;
		/* 单独设置某个角为圆角 */
		border-radius: 0 0 0 0.6rem;
	}
</style>
